<template>
  <div>
    <el-card>
      <div class="head-options">
        <div style="float: right;">
          <el-dropdown :hide-on-click="false" trigger="click" placement="bottom">
            <span class="el-dropdown-link">
              <el-button size="small">Comment：opened <i class="el-icon-caret-bottom"></i></el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="commendRadio">
                  <el-radio v-model="createArticle.commend" :label="0">Close commend</el-radio>
                  <el-radio v-model="createArticle.commend" :label="1">Open commend</el-radio>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown :hide-on-click="false" trigger="click" placement="bottom">
            <span class="el-dropdown-link">
              <el-button size="small">PlatFroms {{getPlatFroms}} <i class="el-icon-caret-bottom"></i></el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                  <el-checkbox-group v-model="createArticle.checkList" class="commendRadio">
                      <el-checkbox label="platform A"></el-checkbox>
                      <el-checkbox label="platform B"></el-checkbox>
                      <el-checkbox label="platform C"></el-checkbox>
                    </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown :hide-on-click="false" trigger="click" placement="bottom">
            <span class="el-dropdown-link">
              <el-button size="small">Link <i class="el-icon-caret-bottom"></i></el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="width: 300px;" class="url-input">
                <el-input placeholder="请输入Link" v-model="createArticle.link" @change="validValue">
                    <template slot="prepend">Url:</template>
                  </el-input>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="success" size="small" @click="articleStatus('publish')">Publish</el-button>
          <el-button type="warning" size="small" @click="articleStatus('draft')">Draft</el-button>
        </div>
      </div>
      <p class="hint">
        创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见 Document
      </p>
      <div class="edit-area">
        <el-form :model="createArticle" ref="createArticleFormRef" :rules="createArticleFormRules">
          <el-form-item prop="title">
            <p class="title-name">Title</p>
            <el-input v-model="createArticle.title" class="title-input"></el-input>
          </el-form-item>
          <div class="edit-center">
            <el-form-item label="Author:" label-width="60px">
              <el-input v-model="createArticle.author" placeholder="author"></el-input>
            </el-form-item>
            <el-form-item label="Publish Time:" label-width="120px">
              <el-date-picker v-model="createArticle.date" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="Importance:" label-width="100px">
              <el-rate v-model="createArticle.importance" :max="3"></el-rate>
            </el-form-item>
          </div>
          <el-form-item label="Summary" label-width="80px" prop="summary">
            <el-input class="summary-input" v-model="createArticle.summary" placeholder="请输入文章摘要"></el-input>
          </el-form-item>
        </el-form>
        <quill-editor ref="myref" v-model="content"/>
        <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      createArticle: {
        commend: 0,
        checkList: [],
        link: '',
        status: 0,
        title: '',
        author: 'Admin',
        date: Date.now(),
        importance: 1,
        summary: ''
      },
      content: '',
      colors: ['#99A9BF', '#FF9900'],
      createArticleFormRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        summary: [
          { required: true, message: '请输入文章摘要', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if(Object.keys(this.$route.params).length !== 0) {
      this.createArticle = this.$route.params
      this.createArticle.checkList = this.$route.params.platforms
      this.content = this.$route.params.content
    }else {
      this.createArticle = {
        commend: 0,
        checkList: [],
        link: '',
        status: 0,
        title: '',
        author: 'Admin',
        date: Date.now(),
        importance: 1,
        summary: ''
      }
    }
  },
  computed: {
    getPlatFroms() {
      return `(${this.createArticle.checkList.length})`
    }
  },
  methods: {
    validValue(val) {
      const reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/gi
      if(!reg.test(val)) {
        this.createArticle.link = ''
        return this.$message({ type: 'warning', message: '请输入正确的链接地址', duration: 2000 })
      }
      this.createArticle.link = val
    },
    articleStatus(status) {
      this.$refs.createArticleFormRef.validate(valid => {
        if(!valid) return
        if(status === 'publish') {
          this.createArticle.status = 1
          if(this.createArticle.serialNumber !== undefined) {
            this.$http.put(`add/article/${this.createArticle.serialNumber}?${this.content}`, this.createArticle)
            this.$router.push({ name: 'pre', params: { path: '/caselist/list' } })
            return this.$message({ type: 'success', message: '修改成功', duration: 2000 })
          }else {
            this.$http.replace('add/article?' + this.content, this.createArticle)
            return this.$message({ type: 'success', message: '发布成功', duration: 2000 })
          }
        }
        if(status === 'draft') {
          this.createArticle.status = 0
          if(this.createArticle.serialNumber !== undefined) {
            this.$http.put(`add/article/${this.createArticle.serialNumber}?${this.content}`, this.createArticle)
            this.$router.replace({ name: 'pre', params: { path: '/caselist/list' } })
            return this.$message({ type: 'success', message: '修改成功', duration: 2000 })
          }else {
            this.$http.post('add/article?' + this.content, this.createArticle)
            return this.$message({ type: 'warning', message: '保存成功', duration: 2000 })
          }
        }
      })
    }
  },
  mounted() {
    const _this = this
    setTimeout(function() {
      const titleName = document.querySelector('.title-name')
      const titleHide = document.querySelector('.title-input .el-input__inner')
      if(titleHide.value.trim() !== '') {
        titleName.classList.add('title-name-transition')
      }
      titleHide.onfocus = function() {
        this.classList.add('title-focus')
        titleName.classList.add('title-name-transition')
      }
      titleHide.onblur = function() {
        this.classList.remove('title-focus')
        if(_this.createArticle.title.trim() === '') {
          titleName.classList.remove('title-name-transition')
        }
      }
    }, 0)
  }
}
</script>

<style scoped lang="less">
  .el-dropdown {
    margin-right: 3px;
  }
  /deep/.el-card__body {
    padding: 0;
  }
  .head-options {
      height: 40px;
      line-height: 40px;
      background-color: #c4d6e7;
  }
  .commendRadio {
    display: flex;
  }
  .url-input /deep/.el-input__inner{
    height: 30px;
  }
  .hint {
    width: 94%;
    margin: 10px auto;
    padding: 5px 8px;
    line-height: 25px;
    background-color: #c3c3c3;
  }
  .edit-area {
    width: 94%;
    margin: 10px auto;
    padding: 5px 8px;
  }
  .title-name{
    float: left;
    transform: translateY(40px) scale(1.2);
    transition: all .2s;
  }
  .title-input /deep/ .el-input__inner {
    width: 100%;
    height: 30px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    cursor: text;
    transform-origin: 50% 100%;
  }
  .title-focus {
    border-bottom-color: #409EFF;
  }
  .title-name-transition {
    transition: all .2s;
    transform: translateY(0) scale(1);
    color: #409EFF;
  }
  .edit-center {
    display: flex;
    .el-form-item {
      margin-right: 80px;
    }
  }
  .el-form-item {
    margin: 20px 0;
  }
  .summary-input /deep/ .el-input__inner {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
  }
  /deep/.el-upload-dragger {
    margin-top: 20px;
  }
</style>
